<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>Chnage mode - Editor.md examples</title>
    <link rel="stylesheet" href="/static/.Template/editormd/css/editormd.css">
    <link rel="stylesheet" href="/static/.Template/editormd/css/style.css">
    <style>
        #codes textarea {
            display: none;
        }

        .form-select {
            display: inline-block;
            width: 10rem;
            padding: 0.375rem 2.25rem 0.375rem 0.75rem;
            -moz-padding-start: calc(0.75rem - 3px);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .form-select {
                transition: none;
            }
        }

        .form-select:focus {
            border-color: #ced4da;
            outline: none;
            box-shadow: 0 0 0 0.1rem rgb(255, 255, 255);
        }

        .form-select[multiple],
        .form-select[size]:not([size="1"]) {
            padding-right: 0.75rem;
            background-image: none;
        }

        .form-select:disabled {
            background-color: #e9ecef;
        }

        .form-select:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 #212529;
        }

        .form-select-sm {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            padding-left: 0.5rem;
            font-size: 0.875rem;
        }

        .form-select-lg {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            padding-left: 1rem;
            font-size: 1.25rem;
        }
    </style>
</head>

<body>
    <div id="layout">
        <header>
            语言 :
            <select class="form-select" id="modes">

            </select>

            <div class="btns" style="display: inline-block; width: auto;">
                <button id="get-code-btn">保存</button>
                <button onclick="history.go(-1)">返回</button>
                <button onclick="download()">下载</button>
            </div>

        </header>

        <div id="article_content">
            <textarea name="content" id="content">{{file_data}}</textarea>
        </div>
        <script src="/static/.Template/jquery-3.7.1.min.js"></script>
        <script src="/static/.Template/Pop/plug-in.js"></script>
        <script src="/static/.Template/editormd/js/editormd.js"></script>
        <script type="text/javascript">
            var testEditor;

            function getCodeValue() {
                return $("#article_content textarea").val(); // 
            }
            function download() {

                var filename = window.location.pathname
                var index = filename.lastIndexOf("/")
                filename = filename.substring(index + 1)

                var link = document.createElement('a')

                link.setAttribute("download", filename)
                link.href = "{{download}}"
                link.click()
            }

            $(function () {
                testEditor = editormd("article_content", {
                    width: "90%",
                    height: 720,
                    watch: false,
                    toolbar: false,
                    codeFold: true,
                    searchReplace: true,
                    placeholder: "Enjoy coding!",
                    value: getCodeValue(),
                    theme: "default",
                    mode: "text/html",
                    path: '/static/.Template/editormd/lib/'
                });

                // 保存
                $("#get-code-btn").bind("click", function () {
                    value = testEditor.getValue()
                    $.ajax({
                        url: '/edit/{{path}}',
                        type: 'post',
                        data: {
                            value: value,
                        },
                        success: function (res) {
                            // 只有请求成功（状态码为200）才会执行这个函数
                            $.Pro(res.message)
                            if (res.code == 200) {
                                setTimeout(function () {
                                    location.reload();
                                }, 1000)
                            }
                        },
                        error: function (xhr) {
                            // 只有请求不正常（状态码不为200）才会执行
                            $.Pro('连接失败')
                        },
                    });
                });


                // 语言选项初始化
                var modesSelect = $("#modes");
                var modeNames = ["text/html", "javascript", "php", "text/xml", "text/json", "java", "actionscript", "perl", "go", "python", "c/c++", "css", "ruby"];
                var modes = ["text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"];
                for (var i = 0, len = modes.length; i < len; i++) {
                    var mode = modes[i];
                    var selected = (localStorage.modeName == modeNames[i]) ? " selected=\"selected\"" : "";
                    modesSelect.append("<option value=\"" + mode + "\"" + selected + " name=\"" + modeNames[i] + "\"" + selected + ">" + modeNames[i] + "</option>");
                }

                // 语言更换
                modesSelect.change(function () {
                    var mode = $(this).val();
                    var modeName = $(this).find("option:selected").attr("name");

                    if (mode == "") {
                        alert("mode == \"\"");
                        return false;
                    }

                    localStorage.mode = mode;
                    localStorage.modeName = modeName;

                    testEditor.setCodeMirrorOption("mode", mode);

                });
            });
        </script>
</body>

</html>